<template>
  <div class="icons">
      <div class="icon" v-for="item of list" :key="item.id">
          <a href="http://piao.qunar.com/touch/index_%E5%8C%97%E4%BA%AC.html?cat=from_area%3Dts_type_nav%26from_index%3D0%26from_value%3D%25E9%2585%2592%25E5%25BA%2597%25E5%25A5%2597%25E9%25A4%2590%26dist_city%3D%25E5%258C%2597%25E4%25BA%25AC">
            <div class="icon-img">
                <img class="icon-img-content" :src="item.imgURL">
            </div>
            <p class="icon-content">
                {{item.desc}}
            </p>
          </a>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props: {
    list: Array
  }
}
</script>

<style scoped>
.icons{
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 50%;
}

.icon{
    width: 25%;
    float: left;
    padding-bottom: 25%;
    position: relative;
    height: 0;
    text-align: center;

}

.icon-img{
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 15%;
    overflow: hidden;
}

.icon-img-content{
    padding: 5%;
    height: 80%;
    line-height: 100%;
}

.icon-content{
    height: 15%;
    bottom: 0;
    margin-top: 75%;
}

</style>
